<template>
  <cu-layout :navProp="{ placeholder: true }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-online-booking-container`]" :style="{ height: `calc(100vh - ${$Platform.navbar}px)` }">
      <uv-sticky bgColor="#fff" offsetTop="0" :customNavHeight="$Platform.navbar">
        <uv-tabs :list="list" :current="current" @change="handleChange" :scrollable="false" :customStyle="{ background: '#ffffff' }" lineColor=" #046f7e"></uv-tabs>
      </uv-sticky>
      <!-- 遮挡tabs 使其不可点击 -->
      <view class="tabs-masking" :style="{ top: `${$Platform.navbar}px` }"></view>
      <!-- 预定选房 -->
      <template v-if="current == 0">
        <view class="data-info-step0" :style="{ 'padding-bottom': formData.roomList.length ? '0' : '0' }">
          <view @click="handleSelectProject">
            <uv-input border="bottom" placeholder="请选择房源项目" inputAlign="right" disabledColor="white" disabled color="#999999" v-model="formData.projectName">
              <template v-slot:prefix>
                <uv-text text="房源项目" size="13" margin="10rpx 0"></uv-text>
              </template>
              <template v-slot:suffix>
                <uv-icon name="arrow-right"></uv-icon>
              </template>
            </uv-input>
          </view>
          <uv-input placeholder="输入签约房间号" border="bottom" inputAlign="right" v-model="formData.roomName" suffixIcon="arrow-right" @input.trim="bindKeyInput">
            <template v-slot:prefix>
              <uv-text text="输入房间号" size="13" margin="10rpx 0"></uv-text>
            </template>
          </uv-input>
          <view class="room-list">
            <view class="tips">{{ formData.message }}</view>
            <view class="room-item" v-for="(item, index) in formData.roomList" :key="index" @click="handleSelectRoom(item)">
              <text>{{ item.statusVal }}</text>
              <text>{{ item.unit_name }}</text>
              <text>{{ item.room_name }}</text>
              <view class="price">
                <uv-text :text="item.old_rent + '元/月'" size="10" color="black"></uv-text>
                <uv-icon :color="formData.roomId == item.id ? theme : '#999999'" name="checkmark-circle-fill"></uv-icon>
              </view>
            </view>
          </view>
          <view class="fixed-wrap">
            <view class="fixed-button">
              <uv-button type="primary" text="确认选择" customStyle="margin-top: 10px" @click="submit"></uv-button>
            </view>
            <uv-safe-bottom></uv-safe-bottom>
          </view>
        </view>
      </template>
      <!-- 租约信息 -->
      <template v-if="current == 1">
        <view class="data-info-step1">
          <view class="card">
            <view class="title">房间信息</view>
            <view class="room-info">
              <view class="project-name ccc">{{ formData.projectName }}</view>
              <view class="room-name">{{ formData.beike_room_name }}-{{ formData.room_number }}</view>
              <view class="room-tag-wrap">
                <view v-if="formData.room_type_name" class="room-tag">{{ formData.room_type_name }}</view>
                <view v-if="formData.area" class="room-tag">{{ formData.area }}</view>
              </view>
            </view>
            <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="formData.old_rent">
              <template v-slot:prefix>
                <uv-text text="月租" size="13" margin="10rpx 0" color="#999999"></uv-text>
              </template>
              <template v-slot:suffix><span class="ccc">元 </span></template>
            </uv-input>
            <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="formData.reserve_amount">
              <template v-slot:prefix>
                <uv-text text="定金" size="13" margin="10rpx 0" color="#999999"></uv-text>
              </template>
              <template v-slot:suffix><span class="ccc">元 </span></template>
            </uv-input>
            <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="formData.date">
              <template v-slot:prefix>
                <uv-text text="预定期限" size="13" margin="10rpx 0" color="red"></uv-text>
              </template>
            </uv-input>
          </view>
          <view class="card" v-if="companyInfo?.enterprise_name">
            <view class="title">企业员工专属优惠</view>
            <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="companyInfo.enterprise_name">
              <template v-slot:prefix>
                <uv-text text="认证企业" size="13" margin="10rpx 0" color="#999999"></uv-text>
              </template>
            </uv-input>
            <!-- <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="companyInfo.discount">
              <template v-slot:prefix>
                <uv-text text="租金折扣" size="13" margin="10rpx 0" color="#999999"></uv-text>
              </template>
            </uv-input> -->
            <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="companyInfo.expiration_date">
              <template v-slot:prefix>
                <uv-text text="有效期" size="13" margin="10rpx 0" color="#999999"></uv-text>
              </template>
            </uv-input>
            <uv-input border="none" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="companyInfo.equity_content">
              <template v-slot:prefix>
                <uv-text text="企业权益" size="13" margin="10rpx 0" color="#999999"></uv-text>
              </template>
            </uv-input>
            <view class="small-tips">*实际优惠以门店最终确认为主</view>
          </view>
          <view v-for="(item, index) in formData.template" :key="index">
            <view class="card" v-if="item.list.length > 0">
              <view class="title">{{ item.key }}</view>
              <uv-input v-for="(items, indexs) in item.list" :key="indexs" border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="items.des">
                <template v-slot:prefix>
                  <uv-text :text="items.title" size="13" margin="10rpx 0" color="#999999"></uv-text>
                </template>
              </uv-input>
            </view>
          </view>
          <view class="fixed-wrap">
            <view class="fixed-button">
              <uv-button type="primary" text="返回修改" :plain="true" customStyle="margin-top: 10px" @click="previousStep"></uv-button>
              <uv-button type="primary" text="下一步" customStyle="margin-top: 10px" @click="submit"></uv-button>
            </view>
            <uv-safe-bottom></uv-safe-bottom>
          </view>
        </view>
      </template>
      <!-- 预定协议 -->
      <template v-if="current == 2">
        <view class="data-info-step2">
          <view class="card">
            <view v-html="formData.reserve_clause"></view>
            <uv-checkbox-group v-model="formData.checkboxValue" :activeColor="theme" shape="square" placement="column">
              <uv-checkbox :name="true" label="已阅读并同意 预定协议"></uv-checkbox>
            </uv-checkbox-group>
          </view>
          <view class="fixed-wrap">
            <view class="fixed-button">
              <uv-button type="primary" text="返回修改" :plain="true" customStyle="margin-top: 10px" @click="previousStep"></uv-button>
              <uv-button type="primary" text="同意条款" customStyle="margin-top: 10px" @click="submit"></uv-button>
            </view>
            <uv-safe-bottom></uv-safe-bottom>
          </view>
        </view>
      </template>
      <!-- 确认提交 -->
      <template v-if="current == 3">
        <uv-picker ref="ref-picker" :columns="pickerColumns" @confirm="pickerConfirm"></uv-picker>
        <uv-picker ref="ref-document-type-picker" :columns="documentTypeColumns" @confirm="documentTypeConfirm"></uv-picker>
        <view class="data-info-step3">
          <view class="card">
            <view class="title">预定信息</view>
            <view class="room-info">
              <view class="project-name ccc">{{ formData.project_name }}</view>
              <view class="room-name">{{ formData.beike_room_name }}-{{ formData.room_number }}</view>
              <view class="room-tag-wrap">
                <view v-if="formData.room_type_name" class="room-tag">{{ formData.room_type_name }}</view>
                <view v-if="formData.area" class="room-tag">{{ formData.area }}</view>
              </view>
            </view>
            <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="formData.old_rent">
              <template v-slot:prefix>
                <uv-text text="月租" size="13" margin="10rpx 0" color="#999999"></uv-text>
              </template>
              <template v-slot:suffix><span class="ccc">元 </span></template>
            </uv-input>
            <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="red" v-model="formData.reserve_amount">
              <template v-slot:prefix>
                <uv-text text="定金" size="13" margin="10rpx 0" color="#999999"></uv-text>
              </template>
              <template v-slot:suffix><span class="ccc">元 </span></template>
            </uv-input>
            <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="red" v-model="formData.date">
              <template v-slot:prefix>
                <uv-text text="预定期限" size="13" margin="10rpx 0" color="#999999"></uv-text>
              </template>
            </uv-input>
          </view>
          <view class="card">
            <view class="title">个人信息</view>
            <!-- 与公众号同步操作不可修改信息 -->
            <uv-input
              border="bottom"
              inputAlign="right"
              disabled
              disabledColor="white"
              color="#999999"
              v-model="userFormData.name"
              placeholder="请输入您的姓名"
              @focus="handleFocus('name')"
            >
              <template v-slot:prefix>
                <view style="display: flex; align-items: center">
                  <text class="require">*</text>
                  <uv-text text="姓名" size="13" margin="10rpx 0"></uv-text>
                </view>
              </template>
            </uv-input>
            <uv-input
              border="bottom"
              inputAlign="right"
              disabled
              disabledColor="white"
              color="#999999"
              v-model="userFormData.card_num"
              placeholder="请输入证件ID"
              @focus="handleFocus('id')"
            >
              <template v-slot:prefix>
                <!-- @click="handleChangedocumentType" -->
                <view style="display: flex; align-items: center">
                  <text class="require">*</text>
                  <!-- color="#999999" -->
                  <uv-text :text="userFormData.card_type" size="13" margin="10rpx 0"></uv-text>
                  <!-- <uv-icon name="arrow-down"></uv-icon> -->
                </view>
              </template>
            </uv-input>
            <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="userFormData.phone" placeholder="请输入您的手机号码">
              <template v-slot:prefix>
                <uv-text text="手机号" size="13" margin="10rpx 0"></uv-text>
              </template>
            </uv-input>
            <view @click="handleChooseIdentity">
              <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="userFormData.occupation" placeholder="请选择您的身份">
                <template v-slot:prefix>
                  <view style="display: flex; align-items: center">
                    <text class="require">*</text>
                    <uv-text text="您的身份" size="13" margin="10rpx 0"></uv-text>
                  </view>
                </template>
                <template v-slot:suffix>
                  <uv-icon name="arrow-right"></uv-icon>
                </template>
              </uv-input>
            </view>
            <view v-if="pickerIncludes.includes(userFormData.occupation)" @click="handleCompany">
              <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="userFormData.company" placeholder="请选择所属公司">
                <template v-slot:prefix>
                  <uv-text text="所属公司" size="13" margin="10rpx 0"></uv-text>
                </template>
                <template v-slot:suffix>
                  <uv-icon name="arrow-right"></uv-icon>
                </template>
              </uv-input>
            </view>
          </view>
          <view class="card">
            <view class="title">温馨提示</view>
            <view v-html="formData.tips"></view>
          </view>
          <view class="fixed-wrap">
            <view class="fixed-button">
              <view class="tips-container">
                <uv-checkbox-group v-model="agreement" :activeColor="theme" shape="circle">
                  <uv-checkbox labelSize="10" label="" :name="true">
                    <template #default>
                      <view style="font-size: 10px"> 我们将收集您的姓名和证件号码，仅用于实名认证<text class="agreement" @click="handleAgreement">《实名认证协议》</text></view>
                    </template>
                  </uv-checkbox>
                </uv-checkbox-group>
              </view>
              <uv-button type="primary" text="返回修改" :plain="true" customStyle="margin-top: 10px" @click="previousStep"></uv-button>
              <uv-button type="primary" text="确认提交" customStyle="margin-top: 10px" @click="submit"></uv-button>
            </view>
            <uv-safe-bottom></uv-safe-bottom>
          </view>
        </view>
      </template>
    </view>
  </cu-layout>
</template>

<script>
import { getStorageCache, removeStorageCache } from '@/common/cache'
import { documentTypeColumns, pickerIncludes, positionColumns } from '@/common/enums/signingReservationEnum'
import { mapActions, mapGetters } from 'vuex'
import { customerInfoOne, customerUpdate, roomInfo, templateRentInfo } from './api'

export default {
  name: 'componentName',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      current: 0,
      agreement: [],
      list: [
        {
          name: '预定选房',
          disabled: false,
        },
        {
          name: '租约信息',
          disabled: true,
        },
        {
          name: '预定协议',
          disabled: true,
        },
        {
          name: '确认提交',
          disabled: true,
        },
      ],
      formData: {
        safeAreaInsets: 0,
        message: '请输入两位以上数字查询房间号',
        projectName: '',
        projectId: '',
        roomName: '',
        roomId: '',
        roomList: [],
        //
        // project_name,
        beike_room_name: '',
        room_number: '',
        room_type_name: '',
        area: '',
        old_rent: '',
        reserve_amount: '',
        date: '',
        // start_date: '',
        // end_date: '',
        template: [],
        reserve_clause: '',
        tips: '',
        //
        checkboxValue: [],
      },
      // 用户信息
      userFormData: {
        card_type: '大陆身份证',
        name: '',
        card_num: '',
        phone: '',
        occupation: '',
        company: '',
      },
      documentTypeColumns: documentTypeColumns,
      pickerIncludes: pickerIncludes,
      pickerColumns: positionColumns,
      isFirstName: true,
      isFirstId: true,
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['theme', 'cityConfig', 'userInfo']),
    companyInfo() {
      let info = {}
      if (this.userInfo?.company_info) {
        info = {
          ...this.userInfo.company_info,
          discount: this.userInfo.company_info.discount ? this.userInfo.company_info.discount + '%' : '',
          expiration_date: this.userInfo.company_info.begin_date ? this.userInfo.company_info.begin_date + ' 至 ' + this.userInfo.company_info.end_date : '',
        }
      }
      return info
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.formData.safeAreaInsets = this.$Platform.device.safeAreaInsets.bottom || 0
    const { projectName = '', projectId = '' } = this.$Route.query
    this.formData.projectName = projectName
    this.formData.projectId = projectId
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {
    if (getStorageCache('reservedCompany')) {
      this.userFormData.company = getStorageCache('reservedCompany')
      removeStorageCache('reservedCompany')
    }
  },
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    handleSelectProject() {
      this.$ROUTE.go('/pages/subpackage/reserved/select-project', { type: 'reserved', path: '/pages/subpackage/reserved/online-booking' })
    },
    async bindKeyInput(e) {
      const { projectId } = this.formData
      this.formData.roomId = ''
      if (!projectId) return uni.$uv.toast('请先选择房源项目!')
      if (e == '') {
        this.formData.roomList = []
        this.formData.message = '请输入两位以上数字查询房间号'
        return
      } else {
        this.formData.message = '可选房间号'
      }
      uni.$uv.debounce(async () => {
        const { data } = await roomInfo({ project_id: projectId, room: e })
        this.formData.roomList = data
        this.formData.message = '可选房间号'
      }, 300)
    },
    handleSelectRoom({ id }) {
      this.formData.roomId = id
    },
    previousStep() {
      this.current--
    },
    handleChange(e) {
      this.current = e.index
    },
    checkStep0() {
      if (!this.formData.roomId) {
        uni.$uv.toast('请先选择签约房间!')
        return false
      }
      return true
    },
    checkStep2() {
      if (this.formData.checkboxValue.length === 0) {
        uni.$uv.toast('阅读完成并同意后,点击"下一步"!')
        return false
      }
      return true
    },
    checkStep3() {
      if (!this.userFormData.name) {
        uni.$uv.toast('请完善姓名!')
        return false
      }
      if (this.userFormData.name && !this.isFirstName) {
        const nameRegex = /^[\u4e00-\u9fa5]+$/
        if (!nameRegex.test(this.userFormData.name)) {
          uni.$uv.toast('请输入正确的姓名!')
          return false
        }
      }
      if (!this.userFormData.card_num) {
        uni.$uv.toast('请完善身份信息!')
        return false
      }
      if (this.userFormData.card_num && !this.isFirstId) {
        const idRegex = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}([0-9Xx])$/
        if (!idRegex.test(this.userFormData.card_num)) {
          uni.$uv.toast('身份证格式不正确!')
          return false
        }
      }
      if (!this.userFormData.occupation) {
        uni.$uv.toast('请选择您的身份!')
        return false
      }
      // if (this.userFormData.occupation && this.pickerIncludes.includes(this.userFormData.occupation)) {
      //   if (!this.userFormData.company) {
      //     uni.$uv.toast('请选择所属公司!')
      //     return false
      //   }
      // }
      return true
    },
    async templateRentInfo() {
      const { cityId } = this.cityConfig
      const { data } = await templateRentInfo({
        projectId: this.formData.projectId,
        roomId: this.formData.roomId,
        cityId: cityId,
      })
      const { project_name, beike_room_name, room_number, room_type_name, area, old_rent, reserve_amount, start_date, end_date, template, reserve_clause, tips, city_id, id } = data
      this.formData.projectName = project_name
      this.formData.beike_room_name = beike_room_name
      this.formData.room_number = room_number
      this.formData.room_type_name = room_type_name
      this.formData.area = area
      this.formData.old_rent = old_rent
      this.formData.reserve_amount = reserve_amount
      this.formData.date = start_date + '--' + end_date
      // this.formData.start_date = start_date
      // this.formData.end_date = end_date
      this.formData.template = template
      this.formData.reserve_clause = reserve_clause
      this.formData.tips = tips
      this.formData.city_id = city_id
      this.formData.id = id
    },
    async customerInfoOne() {
      const { data } = await customerInfoOne()
      this.userFormData
      for (let key in this.userFormData) {
        this.userFormData[key] = data[key]
      }
      this.userFormData.card_type = this.userFormData.card_type ? this.userFormData.card_type : '大陆身份证'
      this.isFirstName = true
      this.isFirstId = true
    },
    async customerUpdate() {
      const { card_num, card_type, company, name, occupation } = this.userFormData
      const params = { card_num, card_type, company, name, occupation }
      const { errcode } = await customerUpdate(params)
      if (errcode === 0) {
        // uni.$uv.toast('更新成功!')
        const { projectId } = this.$Route.query
        const { reserve_amount: amount, city_id: cityId, id: roomId } = this.formData
        this.$ROUTE.go('/pages/payment/index', { scene: 'reserve', amount, projectId, cityId, roomId })
      }
    },
    submit() {
      let status = false
      switch (this.current) {
        case 0:
          // 校验是否选择房间
          status = this.checkStep0()
          if (!status) {
            return false
          }
          // 获取租约信息
          this.templateRentInfo()
          break
        case 2:
          // 校验是否勾选协议
          status = this.checkStep2()
          if (!status) {
            return false
          }
          // 获取用户信息
          this.customerInfoOne()
          break
        case 3:
          if (!this.agreement.length) return uni.$uv.toast('请勾选确认授权!')
          // 校验用户信息数据为空
          status = this.checkStep3()
          if (!status) {
            return false
          }
          // 更新租户信息
          if (this.isFirstName || this.isFirstId) {
            const { projectId } = this.$Route.query
            const { reserve_amount: amount, city_id: cityId, id: roomId } = this.formData
            this.$ROUTE.go('/pages/payment/index', { scene: 'reserve', amount, projectId, cityId, roomId })
          } else {
            this.customerUpdate()
          }
          break
        default:
          break
      }
      if (this.current < 3) {
        this.current++
        const index = this.current
        this.list[index].disabled = false
      }
    },
    handleAgreement() {
      this.$ROUTE.go('/pages/subpackage/privacy-policy/privacy-detail?title=实名认证&subtitle=face_agreement')
    },
    handlePayment() {
      this.$ROUTE.go('/pages/payment/index')
    },
    handleChangedocumentType() {
      this.userFormData.card_num = ''
      this.isFirstId = false
      this.$refs['ref-document-type-picker'].open()
    },
    // 选择身份
    handleChooseIdentity() {
      // this.pickerColumns = []
      this.$refs['ref-picker'].open()
    },
    // 选择公司
    async handleCompany() {
      this.$ROUTE.go('/pages/subpackage/online-signing/select-company', { type: 'reserved' })
    },
    pickerConfirm(e) {
      this.userFormData.occupation = e.value[0]
    },
    documentTypeConfirm(e) {
      this.userFormData.card_type = e.value[0]
    },
    handleFocus(value) {
      if (value == 'name' && this.isFirstName) {
        this.userFormData.name = ''
        this.isFirstName = false
      } else if (value == 'id' && this.isFirstId) {
        this.userFormData.card_num = ''
        this.isFirstId = false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('online-booking-container')} {
  position: relative;
  background: #f5f5f5;
  .tabs-masking {
    position: fixed;
    height: 44px;
    background: rgba(0, 0, 0, 0);
    z-index: 999;
    width: 100%;
  }
  .data-info-step0 {
    margin: 16rpx 0;
    background: white;
    box-sizing: border-box;
    border-left: 0;
    border-right: 0;
    .room-list {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      background: white;
      .tips {
        border: 20rpx solid #f5f5f5;
        width: 100%;
        padding: 20rpx 0;
        text-align: center;
      }
      .room-item {
        border: 2px solid $uv-primary;
        border-radius: 8px;
        margin: 10px;
        width: calc(calc(100% - 60px) / 3);
        box-sizing: border-box;
        text {
          display: block;
          padding: 0 10rpx;
          &:first-child {
            background: $uv-primary;
            color: white;
            text-align: center;
          }
          &:nth-child(2) {
            margin: 5px 0 15px;
          }
          &:nth-child(3) {
            font-weight: bold;
          }
        }
        .price {
          display: flex;
          justify-content: space-between;
          padding: 0 10rpx;
          font-size: 20rpx;
        }
      }
    }
  }
  .ccc {
    color: #999999;
  }
  .data-info-step0,
  .data-info-step1,
  .data-info-step2,
  .data-info-step3 {
    padding-bottom: 100px;
  }
  .card {
    margin: 15px 10px;
    background: white;
    padding: 15px 10px;
    border-radius: 8px;
    .title {
      position: relative;
      padding-left: 10px;
      margin-top: 0;
      margin-bottom: 10px;
      &::before {
        width: 3px;
        height: 100%;
        position: absolute;
        background: $uv-primary;
        left: 0;
        content: ' ';
      }
    }
    .room-info {
      .room-name {
        font-size: 28rpx;
        margin-top: 30rpx;
        margin-bottom: 20rpx;
        color: #999999;
      }
      .room-tag-wrap {
        display: flex;
        flex-wrap: wrap;
        .room-tag {
          font-size: 24rpx;
          margin-right: 5px;
          margin-bottom: 5px;
          // background: $uv-primary;
          border-color: #999999;
          color: #999999;
          border: 1px solid;
          border-radius: 5px;
          padding: 3px 8px;
          // color: white;
        }
      }
    }
    ::v-deep .uv-input {
      padding-left: 0 !important;
      &:last-child {
        border-color: white !important;
      }
    }
  }
  .fixed-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    background: linear-gradient(to bottom, white, #f5f5f5);
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    border-top: 1px solid #f1f1f1;
    .fixed-button {
      display: flex;
      flex-wrap: wrap;
      .tips-container {
        flex-basis: 100%;
        font-size: 10px;
        color: #999999;
        text-align: center;
      }
      ::v-deep .uv-button-wrapper {
        flex: 1;
        margin: 0 15px;
      }
    }
  }
  .require {
    color: red;
    margin: 3px;
    font-size: 10px;
  }
}
.agreement {
  color: $uv-primary;
}
.small-tips {
  font-size: 24rpx;
  color: #999999;
  padding-top: 20rpx;
}
</style>
